<template>
  <!-- cardlist transition -->
  <transition-group
    class="card-phone-Cardlist-temp card-edit-container"
    name="flip-list"
    tag="div">
      <template :key="item.itemid" v-for="(item, index) in list">
        <slot name="node" :item="item" :index="index"></slot>
      </template>
  </transition-group>
</template>

<script>
  export default {
    name: 'CardPhoneTransition',
    props: {
      list: {type: Array, default: []}
    },
  }
</script>

<style lang="scss">
  .flip-list-move {
    transition: transform 0.8s ease;
  }

  .module-edit-container {
    position: relative;
    width: 100%;
    // height: 100%;

    flex: 1;
  }
</style>
